<template>
  <div class="addBank">
    <!-- <x-header :left-options="{backText: ''}">{{id?'编辑银行卡':'添加银行卡'}}</x-header> -->
    <div v-if="id">
      <top :text="'编辑银行卡'"></top>
    </div>
    <div v-if="!id">
      <top :text="'添加银行卡'"></top>
    </div>
    <div style="height: 45px;"></div>
    <div class="bankSty">
      <div class="addBankBox">
        <div class="bankNumber">
          <span>银行卡号:</span>
          <input type="text" v-model="bankName">
        </div>
        <div class="bankNumber">
          <span>开户行:</span>
          <input type="text" v-model="bankOpeningLine">
        </div>
        <div class="bankNumber fr">
          <span>手机验证:</span>
          <input type="text" v-model="phoneVerification" style="margin-right: 65px;width: 50%;">
          <button class="sendNumber" @click="sendVerification" :disabled="isDisabled">{{verificationCode}}</button>
        </div>
      </div>
      <div class="confimBtn" v-if="!id">
        <span @click="confimBtn()">确认</span>
        <p>如果绑定过程中出现问题,请联系客服</p>
      </div>
      <div class="confimBtn" v-if="id">
        <span @click="editBtn()">确认</span>
        <p>如果绑定过程中出现问题,请联系客服</p>
      </div>
    </div>
  </div>
</template>
<script>
  import { XHeader, Confirm, Group, XSwitch, TransferDomDirective as TransferDom } from 'vux'
  import tips from '../../service/tips.js'
  import http from '../../service/http.js'
  import axios from 'axios'
  import Top from '../../components/common/top.vue'
  export default {
    data() {
      return {
        bankName: "",
        bankOpeningLine: "",
        phoneVerification: "",
        verificationCode: "发送验证码",
        isDisabled: false,
        countDown: 60,
        id: "",
        show: false,
      }
    },
    mounted() {
      if (location.hash.split("?")[1]) {
        this.id = location.hash.split("?")[1].split("&")[0].split("=")[1];
      }
      if (this.id) {
        this.bankOpeningLine = decodeURI(location.hash.split("?")[1].split("&")[2].split("=")[1]);
        this.bankName = decodeURI(location.hash.split("?")[1].split("&")[1].split("=")[1]);
      }
    },
    methods: {
      removeBank() {
        this.show = true;
      },
      onCancel() {
        this.show = false;
      },
      onConfirm() {
        http.delete("/user/bank?id=" + this.id).then((res) => {
          if (res.data.status == 200) {
            tips.tips(res.data.msg);
            setTimeout(() => {
              history.back()
            }, 3000)
          }else{
            tips.tips(res.data.msg);
          }
        })
      },
      // 添加提交
      confimBtn() {
        if (!this.bankName) {
          tips.tips("请输入银行卡号");
          return false;
        }
        if (!/^[0-9]*$/.test(this.bankName)) {
          tips.tips("请输入正确的银行卡号");
          return false;
        }
        if (!this.bankOpeningLine) {
          tips.tips("请输入开户行");
          return false;
        }
        if (!this.phoneVerification) {
          tips.tips("请输入手机验证");
          return false;
        }
        http.put('/user/bank', {
          name: this.bankOpeningLine,
          count: this.bankName,
          smscode: this.phoneVerification
        }).then((res) => {
          if (res.data.status == 200) {
            tips.tips(res.data.msg);
            setTimeout(() => {
              history.back()
            }, 3000)
          }else{
            tips.tips(res.data.msg);
          }
        }).catch(res=>{
          tips.tips(res.data.msg);
        })
      },
      // 编辑提交
      editBtn() {
        if (!this.bankName) {
          tips.tips("请输入银行卡号");
          return false;
        }
        if (!this.bankOpeningLine) {
          tips.tips("请输入开户行");
          return false;
        }
        if (!/^[0-9]*$/.test(this.bankName)) {
          tips.tips("请输入正确的银行卡号");
          return false;
        }
        if (!this.phoneVerification) {
          tips.tips("请输入手机验证");
          return false;
        }
        http.post("/user/bank", {
          id: this.id,
          name: this.bankName,
          count: this.bankOpeningLine,
          smscode: this.phoneVerification,
        }).then((res) => {
          if (res.data.status == 200) {
            tips.tips(res.data.msg);
            setTimeout(function () {
              history.back();
            }, 3000)
          }else{
            tips.tips(res.data.msg);
          }
        }).catch(res=>{
          tips.tips(res.data.msg);
        })
      },
      // 获取验证码
      sendVerification() {
        this.countDown = 60;
        this.verificationCode = this.countDown + "s";
        var timer = setInterval(() => {
          this.countDown--;
          this.isDisabled = true;
          if (this.countDown <= 1) {
            this.isDisabled = false;
            this.countDown = '再次获取';
            clearInterval(timer);
          }
          if (this.countDown >= 0) {
            this.verificationCode = this.countDown + "s";
          } else {
            this.verificationCode = this.countDown
          }
        }, 1000)
        http.post("/user/sms", {
          username: window.localStorage.getItem("login.username")
        }).then((res) => {
          if (res.status == 200) {
            tips.tips("验证码发送成功");
          }
        })
      }
    },
    components: {
      XHeader,
      Confirm,
      Group,
      XSwitch,
      Top
    }
  }
</script>
<style lang="less" scoped>
  body {
    background: #f6f6f6;
  }

  .addBank .vux-header {
    background: #fff;
  }

  .fr {
    position: relative;
  }

  .addBank .vux-header .vux-header-title {
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #000;
  }

  .addBank .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }

  .addBank .addBankBox {
    background: #fff;
    margin-top: 10px;
  }

  .addBank .bankSty .bankSty {
    margin-top: 10px;
    position: relative;
  }

  .addBank .bankSty input {
    border: none;
    border-style: none;
    outline: none;
    position: absolute;
    right: 15px;
    text-align: right;
    display: inline-block;
    width: 70%;
    height: 40px;
    line-height: 40px;
  }

  .addBank .bankNumber {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #f6f6f6;
    padding-left: 15px;
    span {
      font-size: 16px;
    }
    .sendNumber {
      position: absolute;
      right: 15px;
      color: #fea620;
      font-size: 12px;
      background: #fff;
      border: none;
      outline: none;
      top: 10px;
      display: block;
      width: 65px;
      text-align: center;
    }
  }

  .addBank .confimBtn {
    margin-top: 100px;
    padding: 0px 15px;
    text-align: center;
    span {
      display: block;
      height: 40px;
      line-height: 40px;
      background: linear-gradient(left, #fedb30, #fe9f0a);
      background-image: linear-gradient(-135deg, #fedb30 0%, #fe9f0a 100%);
      width: 100%;
      text-align: center;
      color: #fff;
      border-radius: 25px;
    }
    p {
      color: red;
      font-size: 13px;
      margin-top: 20px;
    }
  }
</style>